<template>
	<view class="position-relative y-flex">
		<image v-if="isBackgroundImage" class="position-absolute-cover" :src="background" mode="aspectFill" :style="{'opacity': backgroundOpacity}"></image>
		<view class="position-absolute-cover" :style="{'opacity': backgroundOpacity, 'background-color': background}" v-else></view>
		<view class="y-flex y-row y-align-center pt-20 pb-20">
			<view class="y-flex y-flex-1 y-align-center" v-for="(item, index) in data" :key="index" @tap="handleTabbarClick(index)">
				<template v-if="item.icon">
					<template v-if="current == index">
						<image class="find-tabbar-icon" :src="item.selectedIcon || item.icon" mode="aspectFit" v-if="isIconImage(item.selectedIcon || item.icon)"></image>
						<com-icon :name="item.selectedIcon || item.icon" :color="selectedColor" size="50" v-else></com-icon>
					</template>
					<template v-else>
						<image class="find-tabbar-icon" :src="item.icon" mode="aspectFit" v-if="isIconImage(item.icon)"></image>
						<com-icon :name="item.icon" :color="textColor" size="50" v-else></com-icon>
					</template>
				</template>
				<text class="fs-26 mt-10" :style="{color: current === index ? selectedColor : textColor}">{{item.text}}</text>
			</view>
		</view>
		<com-safe-bottom></com-safe-bottom>
	</view>
</template>

<script>
	import { validateUrl } from '@/assets/js/util.js'
	export default {
		props: {
			data: {
				type: Array,
				default () {
					return new Array
				}
			},
			current: {
				type: Number,
				default: ''
			},
			background: {
				type: String,
				default: ''
			},
			backgroundOpacity: {
				type: [Number, String],
				default: 1
			},
			textColor: {
				type: String,
				default: ''
			},
			selectedColor: {
				type: String,
				default: ''
			}
		},
		computed: {
			isBackgroundImage () {
				return this.background.indexOf('http://') > -1 || this.background.indexOf('https://') > -1
			}
		},
		methods: {
			isIconImage (icon) {
				return icon ? validateUrl(icon) : false
			},
			handleTabbarClick (index) {
				this.$emit('change', {current: index, detail: this.data[index]})
			}
		}
	}
</script>

<style>
	.find-tabbar-icon {
		width: 50rpx;
		height: 50rpx;
	}
</style>